<template>
  <div class="goods-list">
    <div class="goods-item" v-for="(item, index) in shopcartStore.cartList" :key="index">
      <div class="goods-item-image">
        <img :src="item.image" alt="" />
      </div>
      <div class="goods-item-info">
        <span><b>商品名称:</b>{{ item.name }}</span>
        <span
          ><b>规格:</b>
          <el-tooltip placement="bottom">
            <template #content>{{ item.sell_point }}</template>
            {{ wrapWord(item.sell_point) }}
          </el-tooltip>
        </span>
        <span><b>单价:</b>{{ item.price }}</span>
        <span
          >数量:
          <i class="bi bi-dash-square" @click="subNum(item)" style="font-size: 25px"></i>
          {{ item.num }}
          <i class="bi bi-plus-square" @click="addNum(item)" style="font-size: 25px"></i>
        </span>
      </div>
    </div>
    <span v-if="shopcartStore.cartList.length > 0">商品的总价为:{{ shopcartStore.total }}</span>
    <span v-else>购物车当前没有商品!</span>
  </div>
</template>

<script setup>
import { useShopcartStore } from '@/store/shopcart'
const shopcartStore = useShopcartStore()
const wrapWord = (str) => {
  const length = str.length
  if (length > 11) {
    return str.substr(0, 11) + '...'
  }
  return str
}
const subNum = (item) => {
  shopcartStore.subNum(item)
}
const addNum = (item) => {
  shopcartStore.addNum(item)
}
</script>

<style lang="scss" scoped>
.goods-list {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.goods-item {
  display: flex;
  margin-bottom: 10px;
  width: 100%;
  border: 1px solid black;
}
.goods-item-image {
  width: 45%;
}
.goods-item-info {
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: space-around;
  padding-top: 20px;
  padding-bottom: 20px;
}
</style>
